<template>
    <a-row :gutter="30">
        <a-col
            :xs="12"
            :md="6"
            v-for="(card, index) in card_data"
            :key="index"
            style="margin-top: 20px"
        >
            <div
                id="unit_card"
                :style="{ borderLeft: 'solid 5px' + card.left_color }"
            >
                <div id="card_left">
                    <p
                        style="
                            margin-left: 20px;
                            margin-top: 10px;
                            color: #606266;
                        "
                    >
                        {{ card.title }}
                    </p>
                    <p
                        :style="{
                            marginLeft: '20px',
                            marginTop: '10px',
                            color: card.total_color,
                            fontSize: '30px',
                        }"
                    >
                        {{ card.total }}
                    </p>
                    <p
                        style="
                            margin-left: 20px;
                            margin-top: 10px;
                            color: #606266;
                            font-size: 10px;
                        "
                    ></p>
                </div>
                <div style="float: right">
                    <div
                        id="icon_back"
                        :style="{ backgroundColor: card.icon_background_color }"
                        align="center"
                    >
                        <i
                            :class="card.icon"
                            :style="{ color: card.icon_color }"
                        ></i>
                    </div>
                </div>
            </div>
        </a-col>
    </a-row>
</template>
<script>
    import { getStat } from '@/api/stat'
    export default {
        data() {
            return {
                card_data: [
                    {
                        title: '设备总数',
                        left_color: '#67C23A',
                        total: 0,
                        total_color: '#409EFF',

                        icon: 'el-icon-user',
                        icon_color: '#fff',
                        icon_background_color: '#67C23A',
                    },
                    {
                        title: '正在运行',
                        left_color: '#F56C6C',
                        total: 0,
                        total_color: '#F56C6C',

                        icon: 'el-icon-goods',
                        icon_color: '#fff',
                        icon_background_color: '#F56C6C',
                    },
                    {
                        title: '未传记录',
                        left_color: '#E6A23C',
                        total: 0,
                        total_color: '#E6A23C',

                        icon: 'el-icon-download',
                        icon_color: '#fff',
                        icon_background_color: '#E6A23C',
                    },
                    {
                        title: '报警数量',
                        left_color: '#409EFF',
                        total: 0,
                        total_color: '#409EFF',

                        icon: 'el-icon-notebook-1',
                        icon_color: '#fff',
                        icon_background_color: '#409EFF',
                    },
                ],
            }
        },
        mounted() {
            this.fetch()
        },
        methods: {
            fetch() {
                this.loading = true
                getStat().then((reply) => {
                    this.loading = false
                    console.log(reply)
                    this.card_data[0].total = reply.devcount
                    this.card_data[1].total = reply.online
                    this.card_data[2].total = reply.unrec
                    this.card_data[3].total = reply.alarmc
                })
            },
        },
    }
</script>
<style scoped>
    i {
        margin-top: 20px;
        font-size: 20px;
    }
    #card_left {
        float: left;
        width: calc(100% - 100px);
        min-height: 120px;
    }
    #unit_card {
        width: 100%;
        min-height: 120px;
        background-color: white;
        border-radius: 10px;
    }
    #icon_back {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        /* background-color: yellow; */
        margin-top: 30px;
        margin-right: 20px;
    }
</style>
